<script setup>

import {Clock, View} from "@element-plus/icons-vue";
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import offlogin from "../components/offlogin.vue";

// export default{
//   components: {
//     offlogin
//   }
// }

const currentTime = ref('')
// 时间相关

let timer = null;

const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}:${seconds}`;
};

// 天气相关
const weather = ref('加载中...');

const fetchWeather = async () => {
  try {
    const apiKey = '4ff0ee6044fb4ee6b25e580e8113ad17';//和风天气的API key
    const city = '101120201';//青岛的城市代码
    const response = await axios.get(
        `https://devapi.qweather.com/v7/weather/now`,
        {
          params: {
          location: city,
          key: apiKey
        }
        }
    )
    // const data = await response.json();
    if (response.data.code === '200') {
      const weatherDescription = response.data.now.text
      const temperature = response.data.now.temp
      weather.value = `${weatherDescription}，${temperature}°C`
    } else {
      weather.value = '无法获取天气'
      console.error('天气API返回错误代码:', response.data.code, response.data.msg)
    }
  } catch (error) {
    console.error('获取天气信息失败:', error)
    weather.value = '获取天气失败'
  } 
};

onMounted(() => {
  updateTime();
  timer = setInterval(updateTime, 1000);
  fetchWeather();
});

onUnmounted(() => {
  clearInterval(timer);
});



</script>

<template>
  <el-main class="block">
    <offlogin></offlogin>
    <el-text class="t1">教务信息管理系统</el-text>
    <div style="position: fixed;top: 21px;left: 80%;">
    <div class="weather">
      <el-icon><sunny /></el-icon>
      <text>   青岛市,   </text>
      <span>{{ weather }}</span>
    </div>
    <div class="time">
      <el-icon><Clock/></el-icon>
      <span>{{ currentTime }}</span>
    </div>
    </div>
  </el-main>
</template>

<style>
.block {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #8eb1f386;
  -moz-box-shadow:2px 2px 10px #505053;

  -webkit-box-shadow:2px 2px 10px #58585a;

  box-shadow:2px 2px 10px #4d4e50;
}
.t1{
  font-size: 40px;
  position: fixed;
  top: 20px;
  left: 50px;
  color: #1a1a1a;
  border-radius: 10px;
}


</style>